<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="../static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../static/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--//fonts-->
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>
<body>
		<div class="container">
			<div class="header-bottom-bottom">
				<h1 align="center">基于人脸分析的校园安防网络平台</h1>
				<div class="clearfix"> </div>
			</div>
				<div class="clearfix"> </div>
		</div>
	</div>
	<!--content-->
	<div class="content">
		<div class="container">
		<div class="women-in">
			<div class="col-md-9 col-d">
				<img style="width: 100%;min-height: 425px" src="{{ url_for('video_feed') }}" />
				<!---->
				<div class="in-line">
					<div class="para-an">
						<h3>黑名单监控区</h3>
					</div>
					<div class="lady-in">
					<img  id = "face" style="width: 100%;height:500px;" src="../static/images/no.jpg" />
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-m-left">
				<img id ="t1" style="width: 100%;height: auto;"/>
				<div class="discount" >
					<img id ="t2" style="width: 100%;height: auto;" />
				</div>
				<div class="discount">
					<img id ="t3" style="width: 100%;height: auto;" />
				</div>
				<div class="twitter-in">
					<h5>TWITTER  UPDATES</h5>
					<span class="twitter-ic">	</span>
					<div class="up-date">
						<p>@suniljoshi Looks like nice and dicent design</p>
						<a href="#">http://bit.ly/sun</a>
						<p class="ago">About 1 hour ago via twitterfeed</p>
					</div>
					<div class="up-date">
						<p>@suniljoshi Looks like nice and dicent design</p>
						<a href="#">http://bit.ly/sun</a>
						<p class="ago">About 1 hour ago via twitterfeed</p>
					</div>
					<a href="#" class="tweets">More Tweets</a>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="clearfix"> </div>
			</div>
			<!---->
			<div class="lady-in-on">
			<div class="buy-an">
            </ul>
		</div>
	</div>
	</div>
	<!---->
	<div class="footer">
		<div class="container">
				<div class="footer-class">
				<div class="class-footer">
					 <p class="footer-grid">Copyright © 2018-2019 大连民族大学 保留所有权利</p>
				</div>
				<div class="clearfix"> </div>
			 	</div>
		 </div>
	</div>

</body>

<script>

setInterval(function () {
    $.ajax({
        url: "http://127.0.0.1:8099/face_img1",
        type: "get",
		success: function(data)
		{
			console.log(data);
			document.getElementById("t1").src = data;
		}
    });
},10000)
//加载区域2
setInterval(function () {
    $.ajax({
        url: "http://127.0.0.1:8099/face_img2",
        type: "get",
		success: function(data)
		{
			console.log(data);
			document.getElementById("t2").src = data;
		}
    });
},11000)
//加载区域3
setInterval(function () {
    $.ajax({
        url: "http://127.0.0.1:8099/face_img3",
        type: "get",
		success: function(data)
		{
			console.log(data);
			document.getElementById("t3").src = data;
		}

    });
},12000)
setInterval(function () {
    $.ajax({
        url: "http://127.0.0.1:8099/blacklist_faceimg",
        type: "get",
		success: function(data)
		{

			console.log(data);
			document.getElementById("face").src = data;
		}

    });
},12000)

</script>


</html>